<!DOCTYPE html>
<html>
<style>
    /* The container */
    .container {
        display: block;
        position: relative;
        padding-left: 35px;
        margin-bottom: 12px;
        cursor: pointer;
        font-size: 22px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    /*    隐藏默认的 input 框  */
    .container input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }

    /*   定义一个 25*25 的框  */
    .checkmark {
        position: absolute;
        top: 0;
        left: 0;
        height: 25px;
        width: 25px;
        background-color: #eee;
    }

    /*   hover  color   */
    .container:hover input~.checkmark {
        background-color: #ccc;
    }

    /*   checked  color  */
    .container input:checked~.checkmark {
        background-color: #2196F3;
    }

    /*      默认隐藏     */
    .checkmark:after {
        content: "";
        position: absolute;
        display: none;
        left: 9px;
        top: 5px;
        width: 5px;
        height: 10px;
        border: solid white;
        border-width: 0 3px 3px 0;
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
        /* 旋转 45 度 */
    }

    /*   当按钮被点击的时候, 取消隐藏    */
    .container input:checked~.checkmark:after {
        display: block;
    }
</style>

<body>

    <h1>Custom-Checkboxes</h1>
    <label class="container">One
        <input type="checkbox" checked="checked">
        <span class="checkmark"></span>
    </label>
    <label class="container">Two
        <input type="checkbox">
        <span class="checkmark"></span>
    </label>


    <div class="root">
        <input type="checkbox" name="" id="" style="     transform: scale(6);  margin-left: 123px; ">aaaaaaaaaaaaaa
    </div>

    <pre>
    <h2>
    Checkboxes 的自定形式, 或放大

    最简单的 Checkboxe 放大:   transform: scale(3); 

    或 自定义:
    </h2>
    </pre>

</body>

</html>